<!--
 外协公司
 -->
<template>
<div style="padding: 2% 3%;">
  <el-row>
    <el-button-group>
      <el-button type="info" :size='size' @click="addShow" :disabled="toggleShow">新增</el-button>
      <el-button type="info" :size='size' @click="editShow" :disabled="!toggleShow">修改</el-button>

    </el-button-group>

      <!-- 修改下拉框 -->
      <template v-if="!toggleShow" >
        <el-select style="margin-left: 1.25rem;" @change="editChange" :size="size" v-model="value" placeholder="请选择外协公司" clearable>
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </template>
      <el-button :size="size" icon="el-icon-close" @click="qingkong" v-if="!toggleShow" circle></el-button>
  </el-row>

  <!-- 新增 -->
  <el-row v-if="toggleShow" >
     <el-divider></el-divider>
     <!-- 改成行类表单  :inline="true"  -->
    <el-form ref="form1"  :inline="true" :rules="rules" :model="form" label-width="120px" >
        <el-form-item label="外协公司" prop="name" >
          <el-input clearable v-model="form.name"></el-input>
        </el-form-item>

        <!-- 用br换行 或者div  -->



    </el-form>
    <el-divider></el-divider>
    <el-button type="primary" style="float: right;" :size='size' @click="save" >保存</el-button>
  </el-row>


   <!-- 修改 -->
  <el-row v-if="!toggleShow">
     <el-divider></el-divider>
    <span v-if="!value">请选择保险公司</span>
    <!-- 根据下拉框是否有值 显示 -->
    <div v-if="value">
      <el-form ref="form1" :inline="true" :rules="rules" :model="form" label-width="120px" >
          <el-form-item label="保险公司" prop="name" >
            <el-input clearable v-model="form.name"></el-input>
          </el-form-item>
           <br />
      </el-form>
      <el-divider></el-divider>
        <el-button type="primary" style="float: right;" :size='size' @click="save" >保存</el-button>
    </div>
  </el-row>


</div>
</template>

<script>
  export default{
    data() {
      return {
       size:'medium',

       //切换新增修改显示
       toggleShow:true,

       form:{
         name:'',
         cost:'',
       },
       //修改下拉框的值
       options:{
       },
       //修改下拉框选择之后存的值
       value:'',
       rules:{
         name:[{ required: true, message: '请输入保险公司', trigger: 'blur' }],


       }
      }
    },
    methods:{

      //切换v-if
      addShow(){
        console.log(this.form);
        this.toggleShow=true
         emptyObj(this.form)
         this.value='';
      },
      editShow(){
        this.value='';
        this.toggleShow=false
         emptyObj(this.form)
         this.editOptions();

      },

       //查找修改下拉框的值赋给options
      editOptions(){
        this.$ajax.post("Outsource/list",{}).then(res=>{
          var result = res.data;
          if(result.success){
            this.options=result.data
          }
        })
      },

      //保存
      save(){
        this.$refs.form1.validate(valid=>{
          if(valid){

            this.$ajax.post("Outsource/save",this.form).then(res=>{
              var result = res.data;
              if(result.success){
                this.$notify({
                  title: '提示',
                  message: '数据保存成功',
                  type: 'success',
                  position: 'bottom-right'
                });
                emptyObj(this.form)
                this.editOptions();
                this.value='';
              }else{
                this.$notify({
                  title: '提示',
                  message: result.msg,
                  type: 'warning',
                  position: 'bottom-right'
                });
              }
            })

          }
        })
      },

    //选择下拉框
    editChange(){
      this.$ajax.post("Outsource/findbyId",{id:this.value}).then(res=>{
          var result = res.data;
          if(result.success){
            this.form=result.data;
            this.$set(this.form,"name",result.data.outsource.name);
            this.form.id=result.data.outsource.id;
          }
      })
    },
    //点击下拉框×
       qingkong(){
         this.value='';
       }
    }
  }

  function emptyObj(obj){
    if(obj.file){
      console.log(11)
      obj.file=""
    }
    for( var key in obj){
      var o = obj[key];
      if(o instanceof Object){
        emptyObj(o);
      }else{
        obj[key]='';
      }
    }
  }
</script>

<style>
</style>
